<!--
 * @Descripttion: 模具档案表单
 * @LastEditors: xzh
 * @LastEditTime: 2023-10-18 23:31:37
-->
<template>
  <DileDrawer
    v-model="moldArchivesForm.visible"
    :loading="moldArchivesForm.loading"
    size="60%"
    @sure="hanldeSure"
  >
    <template #header>
      <span>{{
        $t(`table.btnArr.${!moldArchivesForm.formData.id ? "add" : "edit"}`)
      }}</span>
    </template>
    <template #default>
      <el-form
        ref="formRef"
        :model="moldArchivesForm.formData"
        :rules="formRules"
        label-width="7rem"
        size="large"
        status-icon
      >
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.operator')"
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="moldArchivesForm.formData.operator"
              :selectType="selectTypeEnum.people"
              :cacheLabel="moldArchivesForm.formData.extJson.operatorName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.operatingTime')"
          >
            <el-date-picker
              v-model="moldArchivesForm.formData.operatingTime"
              type="datetime"
              :placeholder="$t('common.selectDate')"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.name')"
            prop="name"
          >
            <el-input
              v-model="moldArchivesForm.formData.name"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('page.moldManageArr.moldArchivesArr.code')">
            <el-input
              v-model="moldArchivesForm.formData.code"
              disabled
              :placeholder="$t('common.systemAutoGenerate')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.mouldGroupCode')"
          >
            <el-input
              v-model="moldArchivesForm.formData.mouldGroupCode"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.mouldLife')"
          >
            <el-input
              v-model="moldArchivesForm.formData.mouldLife"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldType')"
            prop="typeId"
            :validate-status="
              !!moldArchivesForm.formData.typeId ? 'success' : ''
            "
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="moldArchivesForm.formData.typeId"
              :selectType="selectTypeEnum.moldType"
              :cacheLabel="moldArchivesForm.formData.extJson.typeName"
              :expand-on-click-node="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.currentStatus')"
          >
            <el-select
              v-model="moldArchivesForm.formData.statusId"
              :placeholder="$t('common.select')"
            >
              <el-option
                v-for="item in moldArchivesForm.resoure.moldStateArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.specification')"
          >
            <el-input
              v-model="moldArchivesForm.formData.specification"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.factory')"
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="moldArchivesForm.formData.factoryId"
              :expand-on-click-node="false"
              :cacheLabel="moldArchivesForm.formData.extJson.factoryName"
              :extraConditions="{
                type: DepartTypeEnum.factory,
              }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('page.systemManageArr.position')">
            <el-select
              v-model="moldArchivesForm.formData.positionId"
              :placeholder="$t('common.select')"
            >
              <el-option
                v-for="item in moldArchivesForm.resoure.positionArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.receivedDate')"
          >
            <el-date-picker
              v-model="moldArchivesForm.formData.receivedDate"
              type="date"
              :placeholder="$t('common.selectDateTime')"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.moldeCavity')"
          >
            <el-input-number
              v-model="moldArchivesForm.formData.cavityNum"
              controls-position="right"
              :min="0"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.productionDate')"
          >
            <el-date-picker
              v-model="moldArchivesForm.formData.productionDate"
              type="date"
              :placeholder="$t('common.selectDateTime')"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.manufacturer')"
          >
            <el-input
              v-model="moldArchivesForm.formData.manufacturer"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.limitedNum')"
          >
            <el-input-number
              v-model="moldArchivesForm.formData.limitedNum"
              controls-position="right"
              :min="0"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.equipType')"
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="moldArchivesForm.formData.equipmentTypeId"
              :selectType="selectTypeEnum.equipType"
              :cacheLabel="moldArchivesForm.formData.extJson.equipmentTypeName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.manager')"
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="moldArchivesForm.formData.manager"
              :selectType="selectTypeEnum.people"
              :cacheLabel="moldArchivesForm.formData.extJson.managerName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.contact')"
            prop="contact"
          >
            <el-input
              v-model="moldArchivesForm.formData.contact"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </template>
  </DileDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, nextTick, toRef } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import { useI18n } from "vue-i18n";
import { ElNotification } from "element-plus";
import { selectTypeEnum } from "@/components/dile-selectItem/index.type";
import { DepartTypeEnum } from "@/utils/typings/organizeManage/index.type";
import DileInputSelectItem from "@/components/dile-selectItem/selectItem-input/index.vue";
import DileDrawer from "@/components/dile-drawer/index.vue";
import Dile_APi from "@/api";
import Dile_Methods from "@/utils/methods";
import Dile_StoreAction from "@/utils/cache/store";

const emit = defineEmits(["refresh"]);

let { t } = useI18n();
/**
 * @Author: xzh
 * @Descripttion: 表单默认数据
 * @Param:
 */
let defaultData = () => {
  let { id, userName } = Dile_StoreAction.currentUserInfo();
  return {
    id: 0,
    status: true, //状态
    operator: id, //操作员
    operatingTime: "", //操作日期
    name: "", //模具名称
    code: "", //模具编码
    mouldGroupCode: "", //模组编号
    mouldLife: "", //模具寿命
    statusId: null, //当前状态
    specification: "", //规格型号
    factoryId: null, //使用工厂
    typeId: null, //模具类型
    positionId: null, //存放位置
    receivedDate: "", //接收日期
    cavityNum: 0, //模具穴数
    productionDate: "", //出厂日期
    manufacturer: "", //生产厂商
    limitedNum: 0, //模具限定次数
    equipmentTypeId: null, //适用设备类型
    manager: null, //模具负责人
    contact: "", //联系方式
    extJson: {
      operatorName: userName, //操作员名称
      typeName: "", //模具类型名称
      factoryName: "", //使用工厂名称
      equipmentTypeName: "", //适用设备类型名称
      managerName: "", //模具负责人名称
    },
  };
};
/**
 * @Author: xzh
 * @Descripttion: 模具档案表单参数
 * @Param:
 */
let moldArchivesForm = reactive<object_Inf>({
  visible: false,
  loading: false,
  //表单数据
  formData: defaultData(),
  //表单资源
  resoure: {
    //模具状态
    moldStateArr: [],
    //存放位置
    positionArr: [],
  },
});

/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    name: [
      {
        required: true,
        message:
          t("common.enter") + t("page.moldManageArr.moldArchivesArr.name"),
        trigger: "change",
      },
    ],
    contact: [
      {
        validator: (rule: any, value: any, callback: any) => {
          //验证手机号
          Dile_Methods.validator_phone(value) || !value
            ? callback()
            : callback(new Error(t("common.message.pleaseEnterRightPhone")));
        },
        trigger: "change",
      },
    ],
  });
});

/**
 * @Author: xzh
 * @Descripttion:初始化加载
 * @Param:
 * @param {*} id 模具档案主键
 */
let init = async (id: number) => {
  let { visible, loading } = toRefs(moldArchivesForm);
  visible.value = true;
  await nextTick();
  try {
    loading.value = true;
    //加载表单资源
    await initFormresoure();
    //加载表单数据
    await initFormData(id);
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 加载表单资源
 * @Param:
 */
let initFormresoure = async () => {
  //加载模具状态资源
  await initMoldStateresoure();
  //加载存放位置
  await initPositionresoure();
};

/**
 * @Author: xzh
 * @Descripttion: 加载模具状态资源
 * @Param:
 */
let initMoldStateresoure = async () => {
  let moldStateArr = toRef(moldArchivesForm.resoure, "moldStateArr");
  //加载所有模具状态
  moldStateArr.value = Dile_Methods.filterDataArr(
    (await Dile_APi.getMoldStateList()).map((state: object_Inf) => ({
      value: state.id,
      label: state.name,
    }))
  );
};
/**
 * @Author: xzh
 * @Descripttion: 加载存放位置
 * @Param:
 */
let initPositionresoure = async () => {
  let positionArr = toRef(moldArchivesForm.resoure, "positionArr");
  //加载所有存放位置
  positionArr.value = Dile_Methods.filterDataArr(
    (await Dile_APi.getPositionList()).map(({ id, position }: object_Inf) => ({
      value: id,
      label: position,
    }))
  );
};

/**
 * @Author: xzh
 * @Descripttion: 加载表单数据
 * @Param:
 */
let initFormData = async (id: number) => {
  let data: object_Inf = !!id
    ? await Dile_APi.getMoldArchivesInfo(id)
    : defaultData();
  Object.assign(moldArchivesForm.formData, data);
};

/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let hanldeSure = async () => {
  let { formData, loading, visible } = toRefs(moldArchivesForm),
    valid = await formRef.value.validate();
  if (!valid || !!loading.value) {
    return false;
  }
  try {
    loading.value = true;
    await Dile_APi.saveMoldArchives(formData.value);
    //触发刷新回调
    emit("refresh");
    //提示成功
    ElNotification({
      message: t("common.message.OperationSuccess"),
      type: "success",
    });
    //关闭弹框
    visible.value = false;
  } finally {
    loading.value = false;
  }
};

defineExpose({
  init,
});
</script>
<style lang="scss" scoped></style>
